<template>
    <div class="dashboard">
        <!-- 第一行：两个中等图表 -->
        <el-card class="chart-card medium neon-border">
            <div ref="barChart" class="chart"></div>
        </el-card>

        <el-card class="chart-card medium neon-border">
            <div ref="lineChart" class="chart"></div>
        </el-card>

        <!-- 第二行：两个小图表 -->
        <el-card class="chart-card small neon-border">
            <div ref="pieChart" class="chart"></div>
        </el-card>

        <el-card class="chart-card small neon-border">
            <div ref="gaugeChart" class="chart"></div>
        </el-card>

        <!-- 第三行：推荐榜单 -->
        <el-card class="chart-card large neon-border">
            <div ref="recommendChart" class="chart"></div>
        </el-card>
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    name: 'TourismDashboard',
    mounted() {
        this.$nextTick(() => {
            this.initBarChart();
            this.initLineChart();
            this.initPieChart();
            this.initGaugeChart();
            this.initRecommendChart();
        });
    },
    methods: {
        initBarChart() {
            const chart = echarts.init(this.$refs.barChart);
            chart.setOption({
                title: {
                    text: '热门景区推荐 TOP5',
                    left: 'center',
                    textStyle: {
                        color: '#ff9e00',
                        fontSize: 16
                    }
                },
                grid: { top: 70, bottom: 30 },
                xAxis: {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#ff7700',
                            width: 1
                        }
                    },
                    splitLine: { show: false }
                },
                yAxis: {
                    type: 'category',
                    data: ['锦里古街', '杜甫草堂', '都江堰', '金沙遗址博物馆', '乐山大佛'],
                    axisLine: {
                        lineStyle: {
                            color: '#ff7700',
                            width: 1
                        }
                    },
                    axisLabel: {
                        color: '#ffcc77',
                        fontSize: 12
                    }
                },
                series: [{
                    type: 'bar',
                    data: [1890, 1560, 1420, 1350, 980],
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                            { offset: 0, color: '#ff7700' },
                            { offset: 1, color: '#ff5500' }
                        ]),
                        borderRadius: [0, 10, 10, 0]
                    },
                    barWidth: 15,
                    label: {
                        show: true,
                        position: 'right',
                        color: '#ffcc00'
                    }
                }],
                backgroundColor: 'rgba(30, 15, 5, 0.5)'
            });
        },

        initLineChart() {
            const chart = echarts.init(this.$refs.lineChart);
            chart.setOption({
                title: {
                    text: '论坛活跃趋势',
                    left: 'center',
                    textStyle: {
                        color: '#ff9e00',
                        fontSize: 16
                    }
                },
                grid: { top: 70, bottom: 30 },
                xAxis: {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                    axisLine: {
                        lineStyle: {
                            color: '#ff7700',
                            width: 1
                        }
                    },
                    axisLabel: {
                        color: '#ffcc77',
                        fontSize: 12
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#ff7700',
                            width: 1
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#ff550033',
                            type: 'dashed'
                        }
                    }
                },
                series: [{
                    type: 'line',
                    data: [12.5, 15.3, 18.6, 22.4, 25.8, 30.2],
                    smooth: true,
                    lineStyle: {
                        width: 3,
                        color: '#ffcc00'
                    },
                    itemStyle: {
                        color: '#ffcc00',
                        borderWidth: 2
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#ffcc0033' },
                            { offset: 1, color: '#ffcc0000' }
                        ])
                    },
                    symbol: 'circle',
                    symbolSize: 8
                }],
                backgroundColor: 'rgba(30, 15, 5, 0.5)'
            });
        },

        initPieChart() {
            const chart = echarts.init(this.$refs.pieChart);
            chart.setOption({
                title: {
                    text: '文创销售占比',
                    left: 'center',
                    textStyle: {
                        color: '#ff9e00',
                        fontSize: 16
                    }
                },
                legend: {
                    bottom: 15,
                    textStyle: {
                        color: '#ffcc77',
                        fontSize: 12
                    }
                },
                series: [{
                    type: 'pie',
                    radius: ['50%', '70%'],
                    label: {
                        color: '#ffcc77',
                        fontSize: 12
                    },
                    data: [
                        { value: 45, name: '纪念徽章', itemStyle: { color: '#ff7700' } },
                        { value: 25, name: '景区明信片', itemStyle: { color: '#ff9e00' } },
                        { value: 15, name: '文化衫', itemStyle: { color: '#ff5500' } },
                        { value: 15, name: '数字藏品', itemStyle: { color: '#ffcc00' } },
                    ],
                    itemStyle: {
                        borderRadius: 5,
                        borderColor: '#1e0f05',
                        borderWidth: 2
                    }
                }],
                backgroundColor: 'rgba(30, 15, 5, 0.5)'
            });
        },

        initGaugeChart() {
            const chart = echarts.init(this.$refs.gaugeChart);
            chart.setOption({
                title: {
                    text: '访问量',
                    left: 'center',
                    textStyle: {
                        color: '#ff9e00',
                        fontSize: 16
                    }
                },
                series: [{
                    type: 'gauge',
                    center: ['50%', '60%'],
                    progress: {
                        show: true,
                        width: 15,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                { offset: 0, color: '#ff7700' },
                                { offset: 1, color: '#ff5500' }
                            ])
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            width: 15,
                            color: [[1, '#ff550033']]
                        }
                    },
                    axisTick: { show: false },
                    splitLine: {
                        length: 15,
                        lineStyle: {
                            color: '#ffcc00',
                            width: 2
                        }
                    },
                    axisLabel: {
                        color: '#ffcc77',
                        distance: 20,
                        fontSize: 10
                    },
                    detail: {
                        formatter: '{value}',
                        color: '#ffcc00',
                        fontSize: 20,
                        offsetCenter: [0, '40%']
                    },
                    data: [{ value: 68.5, name: '' }],
                }],
                backgroundColor: 'rgba(30, 15, 5, 0.5)'
            });
        },

        initRecommendChart() {
            const chart = echarts.init(this.$refs.recommendChart);

            const userInterests = ['历史文化', '自然风光', '亲子游'];
            const recommendations = [
                { name: '夜游锦江', score: 98, match: '95%匹配您的历史文化兴趣' },
                { name: '人民公园鹤鸣茶社', score: 95, match: '92%匹配您的自然风光兴趣' },
                { name: '熊猫巴士', score: 93, match: '90%匹配您的亲子游兴趣' },
                { name: '安仁古镇', score: 91, match: '88%匹配您的历史文化兴趣' },
                { name: '峨眉山', score: 89, match: '85%匹配您的自然风光兴趣' }
            ];

            chart.setOption({
                title: {
                    text: '基于您兴趣的推荐',
                    left: 'center',
                    textStyle: {
                        color: '#ff9e00',
                        fontSize: 18
                    }
                },
                grid: {
                    left: '20%',
                    right: '10%',
                    top: '20%',
                    bottom: '20%'
                },
                xAxis: {
                    type: 'value',
                    max: 100,
                    axisLine: {
                        lineStyle: {
                            color: '#ff7700',
                            width: 1
                        }
                    },
                    splitLine: { show: false },
                    axisLabel: { show: false }
                },
                yAxis: {
                    type: 'category',
                    data: recommendations.map(item => item.name),
                    axisLine: {
                        lineStyle: {
                            color: '#ff7700',
                            width: 1
                        }
                    },
                    axisLabel: {
                        color: '#ffcc77',
                        fontSize: 14
                    }
                },
                series: [{
                    type: 'bar',
                    data: recommendations.map(item => ({
                        value: item.score,
                        name: item.name,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                { offset: 0, color: '#ff7700' },
                                { offset: 1, color: '#ff5500' }
                            ]),
                            borderRadius: [0, 10, 10, 0]
                        },
                        label: {
                            show: true,
                            position: 'right',
                            formatter: '{@score}分 - {b}',
                            color: '#ffcc00'
                        }
                    })),
                    barWidth: 20,
                    labelLine: { show: false }
                }],
                tooltip: {
                    trigger: 'item',
                    formatter: params => {
                        const item = recommendations[params.dataIndex];
                        return `
                <div style="font-weight:bold;color:#ff9e00">${item.name}</div>
                <div>推荐指数：${item.score}分</div>
                <div>${item.match}</div>
                <div>用户兴趣标签：${userInterests.join('、')}</div>
              `;
                    }
                },
                backgroundColor: 'rgba(30, 15, 5, 0.5)'
            });
        }
    }
};
</script>

<style scoped>
.dashboard {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto auto;
    gap: 16px;
    padding: 16px;
    background: #616160;
    min-height: 100vh;
    box-sizing: border-box;
}

.chart-card {
    background: rgba(46, 46, 46, 0.8);
    border-radius: 12px;
    border: 1px solid #ff770033;
    box-shadow: 0 0 20px #ff770033;
    transition: all 0.3s;
}

.chart-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 30px #ff770066;
}

.neon-border {
    position: relative;
}

.neon-border::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 1px;
    background: linear-gradient(45deg, #f6be65, #86e1ef);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.chart {
    width: 100%;
    height: 100%;
    min-height: 200px;
    padding: 15px;
}

/* 尺寸分类 */
.medium {
    grid-column: span 1;
    height: 300px;
}

.small {
    grid-column: span 1;
    height: 280px;
}

.large {
    grid-column: span 2;
    height: 320px;
}

@media (max-width: 992px) {
    .dashboard {
        grid-template-columns: 1fr;
    }

    .medium,
    .small,
    .large {
        grid-column: span 1;
    }
}
</style>